import { Col, Row, Image, Button } from 'antd';
import { RightOutlined } from '@ant-design/icons';
import { useHistory } from 'react-router-dom';
import React from 'react';
import './ContextColor.less';

export class ContextColorProps{
} 

const ContextColor: React.FC<ContextColorProps> = (props) => {

    const history = useHistory();

return React.useMemo(() => <div className='page-context-color'>
    <Row>
        <Col span={12}>
            <Image
                width='50vh'
                src="https://pic.imgdb.cn/item/65bc5ec6871b83018a24f551.png"
            />
        </Col>
        <Col span={12} className='row-right'>
            <div className='title'>
                网页颜色生成器
            </div>
            <div className='desc'>
            这是一个网页颜色生成器，可以帮助你选择合适的颜色搭配方案。通过实时预览编辑，你可以快速查看不同颜色搭配的效果，并应用到你的网站中。
            </div>
            <Button type='primary' onClick={() => history.push('/setting')}>
                开始配置
                <RightOutlined rev={undefined} />
            </Button>
        </Col>
    </Row>
</div>, []);

}

ContextColor.defaultProps = new ContextColorProps();
export default ContextColor;